import React, { createContext, useState, useRef, useEffect } from 'react';
import {
    Animated,
    Text,
    View,
    StyleSheet,
    Button,
    SafeAreaView,
    StatusBar,
    Dimensions,
    Alert,
} from 'react-native';

//动画组件1练习 渐变
const AnimPage2Page = () => {

    // 设置透明度
    const fadeAnim = useRef(new Animated.Value(0)).current;

    const moveAnim = useRef(new Animated.Value(0)).current

    const fadeIn = () => {
        // Will change fadeAnim value to 1 in 5 seconds
        Animated.timing(fadeAnim, {
            toValue: 1,
            duration: 1000,

            // 使用原生动画渲染 执行效率更高
            useNativeDriver: true,
        }).start(() => {
            // Alert.alert('显示出来了')
        });
    };

    const fadeOut = () => {
        // Will change fadeAnim value to 0 in 3 seconds
        Animated.timing(fadeAnim, {
            toValue: 0,
            duration: 1000,

            // 使用原生动画渲染 执行效率更高
            useNativeDriver: true,
        }).start(() => {
            // Alert.alert('隐藏起来了')
        });
    };

    //生命周期函数
    //组件加载之后开始执行
    useEffect(() => {
        console.log('页面加载出来了')
        scanMove()
        return;
    })

    const scanMove = () => {
        moveAnim.setValue(0)
        Animated.timing(moveAnim, {
            toValue: 200,
            duration: 3000,
            useNativeDriver: true
        }).start(() => {
            scanMove()
        })
    }

    return (
        <View style={[styles.root]}>

            {/* 顶部状态栏 */}
            <StatusBar
                hidden={false}   //隐藏状态栏
                backgroundColor={"#FF0000"}     //仅在Android设备有效
                barStyle={"light-content"}       //状态栏字体部件颜色
            />

            <SafeAreaView style={styles.container}>
                <Animated.View
                    style={[
                        styles.fadingContainer,
                        {
                            // 透明度
                            opacity: fadeAnim,
                        },
                    ]}>
                    <Text style={styles.fadingText}>Fading View!</Text>
                </Animated.View>
                <View style={styles.buttonRow}>
                    <Button title="Fade In View" onPress={fadeIn} />
                    <Button title="Fade Out View" onPress={fadeOut} />
                </View>

                <View style={styles.scan}>
                    <Animated.View
                        style={[
                            styles.border,
                            {
                                transform: [{ translateY: moveAnim }]
                            },
                        ]} />
                </View>
            </SafeAreaView>

        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        justifyContent: "center",
        alignItems: "center",
        height: Dimensions.get('window').height
    },
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    fadingContainer: {
        padding: 20,
        backgroundColor: 'powderblue',
    },
    fadingText: {
        fontSize: 28,
    },
    buttonRow: {
        flexBasis: 100,
        justifyContent: 'space-evenly',
        marginVertical: 16,
    },
    scan: {
        width: 200,
        height: 200,
        borderWidth: 1,
        borderBlockColor: 'green'
    },
    border: {
        borderWidth: 1,
        borderColor: 'red'
    }
})

export default AnimPage2Page;
